<template>
	<view>
		<u-image width="100%" height="300rpx" :src="inform.src||'https://cdn.uviewui.com/uview/swiper/3.jpg'"></u-image>
		<view id="text_name">
			<text style="font-size: 50rpx;font-weight: bold;">{{ inform.title || title }}</text>
		</view>
		<!-- <u-line color="green"  class="line"/> -->

		<view class="texts">
			<h3>
				<image mode="aspectFit" src="~@/static/recruitment.png"></image>
				招新部门:
			</h3>
			<view v-for="(department,index) in inform.departments" :key="'depart-'+index" class="text_rooms">
				<view class="text_box text_room">
					{{department}}
				</view>
			</view>

			<h3>
				<image mode="aspectFit" src="~@/static/recruitment.png"></image>
				招新时间:
			</h3>
			<view v-for="(timeaddr,index) in inform.timeaddr" :key="'time-'+index" class="text_rooms">
				<view class="text_box">
					{{timeaddr.time}}
				</view>
				<view class="text_box">
					{{timeaddr.addr}}
				</view>
			</view>

			<h3>
				<image mode="aspectFit" src="~@/static/recruitment.png"></image>
				组织介绍:
			</h3>
			<view class="text_box" id="intro">
				{{inform.introduce}}
			</view>

			<h3>
				<image mode="aspectFit" src="~@/static/recruitment.png"></image>
				交流群:
				<u-image width="56rpx" height="56rpx" src="~@/static/QRcode.png" class="qr-code" @click="onShowQRcode()"></u-image>
			</h3>
			<view class="text_box">
				2331333
			</view>

			<!-- <view class="video">
				<video :src="inform.video" controls></video>
			</view>
 -->
			<view class="text_btn">
				<u-button type="success" class="btn" size="medium" @click="goOrg()">点我报名</u-button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				inform: {
					departments: [
						'办公室：10人',
						'宣传部：10人'
					],
					timeaddr: [{
						time: '2021-10-10',
						addr: 'c区'
					}, {
						time: '2021-10-10',
						addr: 'c区'
					}],
					introduce: '这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，',
					qrcode: 'https://i.bmp.ovh/imgs/2021/08/f6b34909636d066c.jpg',
					video: '1',
					oid: '1',
					img: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					title: '',
				},
				class: ''
			}
		},
		onLoad(option) {
			console.log(option);
			uni.setNavigationBarTitle({
				title: option.title+'招新信息',
			})
			this.title = option.title
			this.class = option.class
			console.log(this.class)
			this.$request({
				url: '/organization/getrecruitmsgbyid',
				data: {
          'rId': option.id
        },
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
			}).then(res => {
				this.inform = res.data
			}).catch(res => {
				console.log(res)
				// 失败后执行
				console.log('reserror')
			})
		},
		methods: {
			goOrg() {
				console.log(this.class)
        uni.navigateTo({
          url: '/pages/joinorg/joinorg?id=' + this.inform.oid + '+&title=' + this.inform.title
        })
			},
			onShowQRcode(){
				uni.previewImage({
					urls:[this.inform.qrcode]
				})
			}
		}
	}
</script>

<style scoped>
	#text_name {
		text-align: center;
		margin: 24rpx 0;
		font-size: 32rpx;
	}

	.texts {
		margin: 36rpx;
	}

	.texts image {
		height: 36rpx;
		width: 48rpx;
	}

	.texts h3 {
		margin: 48rpx 0 24rpx;
		font-size: 32rpx;
	}

	.text_box {
		text-align: center;
		margin: 10rpx 25%;
		line-height: 56rpx;
		-webkit-box-shadow: 4px 4px 12px -7px #c8c8c8;
		-moz-box-shadow: 4px 4px 12px -7px #c8c8c8;
		box-shadow: 4px 4px 12px -7px #c8c8c8;
	}

	#intro {
		margin: 0 10%;
		text-align: center;
		line-height: 48rpx;
	}
	
	.qr-code {
		float: right;
		right: 36rpx;
	}

	video {
		margin: 36rpx 0;
		padding: 0;
		width: 100%;
	}

	.text_btn {
		text-align: center;
		width: 100%;
	}

	.btn {
		margin: 0 18rpx 18rpx;
	}
</style>
<!-- 招新详情页 -->
